<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CH洗衣客系统 - 登录/注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        }
        .tab-indicator {
            transition: all 0.3s ease;
        }
        .input-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
        }
        .user-type-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        .login-method-btn.active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }
        .social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f3f4f6;
            transition: all 0.3s ease;
        }
        .social-icon:hover {
            background-color: #e5e7eb;
        }
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body class="flex items-center justify-center font-sans">
    <div class="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden">
        <!-- 顶部区域 -->
        <div class="p-8 text-center">
            <div class="text-3xl font-['Pacifico'] text-primary mb-2">CH洗衣客</div>
            <h1 class="text-xl font-semibold text-gray-800">欢迎使用 CH洗衣客系统</h1>

            <!-- 用户类型选择 -->
            <div class="flex justify-center mt-6 mb-4 space-x-2">
                <button class="user-type-btn px-4 py-2 rounded-button bg-gray-100 text-gray-700 active" data-type="user">用户</button>
                <button class="user-type-btn px-4 py-2 rounded-button bg-gray-100 text-gray-700" data-type="admin">配送员</button>
                <button class="user-type-btn px-4 py-2 rounded-button bg-gray-100 text-gray-700" data-type="delivery">管理员</button>
            </div>
        </div>

        <!-- 登录/注册切换 -->
        <div class="px-8">
            <div class="flex border-b border-gray-200">
                <button class="login-method-btn flex-1 py-3 font-medium text-gray-600 active" data-tab="login">登录</button>
                <button class="login-method-btn flex-1 py-3 font-medium text-gray-600" data-tab="register">注册</button>
            </div>
        </div>

        <!-- 登录表单 -->
        <div class="p-8" id="login-form">
            <div class="space-y-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-user input-icon text-gray-400"></i>
                    </div>
                    <input type="text" id="loginUsername" placeholder="请输入账号" class="w-full pl-10 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
                </div>

                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-lock input-icon text-gray-400"></i>
                    </div>
                    <input type="password" id="loginPassword" placeholder="请输入密码" class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
                    <button class="absolute inset-y-0 right-0 px-3">
                        <i class="fas fa-eye-slash input-icon text-gray-400"></i>
                    </button>
                </div>
            </div>

            <button class="w-full mt-6 py-3 bg-primary text-white rounded-button font-medium hover:bg-blue-600 transition" onclick="handleLogin()">登录</button>
        </div>

        <!-- 注册表单 -->
        <div class="p-8 hidden" id="register-form">
            <div class="space-y-4">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-user input-icon text-gray-400"></i>
                    </div>
                    <input type="text" id="registerUsername" placeholder="请输入用户名" class="w-full pl-10 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
                </div>

                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-lock input-icon text-gray-400"></i>
                    </div>
                    <input type="password" id="registerPassword" placeholder="请设置密码" class="w-full pl-10 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
                </div>

                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-lock input-icon text-gray-400"></i>
                    </div>
                    <input type="password" id="confirmPassword" placeholder="请确认密码" class="w-full pl-10 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
                </div>
            </div>

            <button class="w-full mt-6 py-3 bg-primary text-white rounded-button font-medium hover:bg-blue-600 transition" onclick="handleRegister()">注册</button>
        </div>

        <!-- 第三方登录 -->
        <div class="px-8 pb-8">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-200"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                </div>
            </div>
            <div class="flex justify-center mt-6 space-x-4">
                <a href="#" class="social-icon text-blue-600">
                    <i class="fab fa-weixin"></i>
                </a>
                <a href="#" class="social-icon text-blue-500">
                    <i class="fab fa-qq"></i>
                </a>
                <a href="#" class="social-icon text-red-500">
                    <i class="fab fa-weibo"></i>
                </a>
            </div>
        </div>

        <!-- 底部协议 -->
        <div class="px-8 pb-8 text-center">
            <div class="flex items-center justify-center">
                <input type="checkbox" id="agreement" class="rounded border-gray-300 text-primary focus:ring-primary">
                <label for="agreement" class="ml-2 text-sm text-gray-500">我已阅读并同意</label>
                <a href="#" class="ml-1 text-sm text-primary hover:underline">用户协议</a>
                <span class="mx-1 text-sm text-gray-500">和</span>
                <a href="#" class="text-sm text-primary hover:underline">隐私政策</a>
            </div>
        </div>
    </div>

    <script>
        // 用户类型切换
        document.querySelectorAll('.user-type-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.user-type-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 登录/注册切换
        document.querySelectorAll('.login-method-btn[data-tab]').forEach(btn => {
            btn.addEventListener('click', function() {
                const tab = this.dataset.tab;
                document.querySelectorAll('.login-method-btn[data-tab]').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                document.getElementById('login-form').classList.toggle('hidden', tab !== 'login');
                document.getElementById('register-form').classList.toggle('hidden', tab !== 'register');
            });
        });

        // 密码显示/隐藏
        const passwordInput = document.querySelector('#login-form input[type="password"]');
        const togglePasswordBtn = document.querySelector('#login-form button');
        togglePasswordBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const icon = this.querySelector('i');
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });

        // 注册处理
        async function handleRegister() {
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const userType = document.querySelector('.user-type-btn.active').dataset.type;

            if (!username || !password || !confirmPassword) {
                alert('请填写完整信息！');
                return;
            }

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }

            try {
                const response = await fetch('/api/user/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username,
                        password,
                        userType
                    })
                });

                const result = await response.json();
                if (result.success) {
                    // 注册成功后自动登录并弹窗
                    alert(result.welcome || '注册成功，已自动登录！');
                    if (userType === 'user') {
                        window.location.href = 'User/index.html';
                    } else if (userType === 'admin') {
                        window.location.href = 'Distributor/index.html';
                    } else if (userType === 'delivery') {
                        window.location.href = 'Manager/index.html';
                    }
                } else {
                    alert(result.message || '注册失败，请稍后重试！');
                }
            } catch (error) {
                alert('注册失败，请稍后重试！');
                console.error('注册错误:', error);
            }
        }

        // 登录处理
        async function handleLogin() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const userType = document.querySelector('.user-type-btn.active').dataset.type;

            if (!username || !password) {
                alert('请填写完整信息！');
                return;
            }

            try {
                const response = await fetch('/api/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username,
                        password,
                        userType
                    })
                });

                const result = await response.json();
                if (result.success) {
                    alert('登录成功！');
                    if (userType === 'user') {
                        window.location.href = 'User/index.html';
                    } else if (userType === 'admin') {
                        window.location.href = 'Distributor/index.html';
                    } else if (userType === 'delivery') {
                        window.location.href = 'Manager/index.html';
                    }
                } else {
                    alert(result.message || '登录失败，请检查账号密码！');
                }
            } catch (error) {
                alert('登录失败，请稍后重试！');
                console.error('登录错误:', error);
            }
        }
    </script>
</body>
</html>
